<template>
  <tlbs-map
    ref="mapRef"
    api-key="LTOBZ-VNRKJ-L5KFS-DHZGP-AGGGK-3MFPN"
    :center="center"
    :zoom="zoom"
    :control="control"
    :options="{
      mapStyleId: 'style4',
      pitch: 46,
      rotation: 13.6,
      // renderOptions: {
      //   enableBloom: true // 泛光
      // },
      baseMap: {
        // 设置卫星地图
        type: 'satellite'
      }
    }"
    @map_inited="onMapInited"
  >
    <!-- @click="onClick" -->
    <!-- <tlbs-multi-label
      ref="labelRef"
      :geometries="geometries"
      :styles="styles"
      :options="options"
    /> -->

    <!-- 展示图标 -->
    <tlbs-multi-marker
      ref="markerRef"
      :geometries="geometries"
      @click="onClick"
      :styles="styles"
    />
    <!-- 展示文本 -->
    <!-- <tlbs-multi-label :geometries="geometries" :styles="labelStyles" /> -->
  </tlbs-map>
  <!-- <div id="info">
    <h4 id="txt">{{ txt }}</h4>
    <p id="markerid">markerID test: {{ selectedMarkerId }}</p>
    <p id="position">当前marker位置：{{ currentPosition }}</p>
  </div> -->
  <!-- <div>
    <button @click.stop="getLayerInstance">打印点标记实例</button>
  </div> -->
</template>

<script setup>
  import { ref } from 'vue'
  import { getDeviceInfoList } from '@/api/device/deviceInfo'

  // 文本和状态变量
  const txt = ref('标记点信息展示')
  const selectedMarkerId = ref('marker1')
  const currentPosition = ref('39.984104,116.407503')

  const mapRef = ref(null)
  const markerRef = ref(null)
  const center = ref({ lat: 43.837038, lng: 125.313343 })
  const zoom = ref(15)
  const onClick = (e) => {
    selectedMarkerId.value = e.geometry.id
    currentPosition.value = e.geometry.position
    console.log(e.geometry)
    // console.log(centerTest)
  }

  const getLayerInstance = () => {
    console.log(markerRef.value.marker)
  }

  const control = {
    scale: {},
    zoom: {
      position: 'topRight'
    }
  }

  const geometries = [
    // {
    //   id: 'marker', // 点图形数据的标志信息
    //   styleId: 'marker', // 样式id
    //   position: center.value, // 标注点位置
    //   content: '腾讯北京总部', // 标注文本
    //   properties: {
    //     // 标注点的属性数据
    //     title: 'marker'
    //   }
    // }
  ]

  const baseMap = ref({
    // 设置卫星地图
    type: 'satellite'
  })

  let bounds = {}

  const onMapInited = () => {
    console.log(mapRef.value.map)
    console.log(markerRef.value.marker)
    // geometries[0] = {
    //   id: 'marker', // 点图形数据的标志信息
    //   styleId: 'marker', // 样式id
    //   position: new TMap.LatLng(39.91799, 116.407503), // 标注点位置
    //   content: '腾讯北京总部', // 标注文本
    //   properties: {
    //     // 标注点的属性数据
    //     title: 'marker'
    //   }
    // }
    getTableData()
    console.log('window.TMap=', TMap)
    bounds = new TMap.LatLngBounds()
  }

  const showMarker = () => {
    //判断标注点是否在范围内
    geometries.forEach((item, index) => {
      console.log('bounds_item=', item)
      console.log('bounds_item=', item)
      console.log('bounds.contains(item.position)=', bounds.isEmpty())
      //若坐标点不在范围内，扩大bounds范围
      if (bounds.isEmpty() || !bounds.contains(item.position)) {
        bounds.extend(item.position)
      }
    })
    console.log('bounds=', bounds)
    //设置地图可视范围
    mapRef.value.map.fitBounds(bounds, {
      padding: 100 // 自适应边距
    })
  }

  // 查询
  const getTableData = async () => {
    const table = await getDeviceInfoList({
      page: 1,
      pageSize: 10
    })
    if (table.code === 0) {
      console.log(table.data.list)
      // 当组件挂载后执行此代码
      table.data.list.forEach((item, index) => {
        console.log(`Item ${index}:`, item)
        geometries.push({
          id: 'marker', // 点图形数据的标志信息
          styleId: 'marker', // 样式id
          position: new TMap.LatLng(item.latitude, item.longitude), // 标注点位置 { lat: item.latitude, lng: item.longitude }
          content: `设备名称：${item.name} 运行状态：${item.status}`, // 标注文本
          properties: {
            // 标注点的属性数据
            title: 'marker'
          }
        })
      })

      markerRef.value.marker.setGeometries(geometries)
      console.log('geometries=====', geometries)
      showMarker()
    }
  }

  const styles = {
    marker: {
      offset: { x: 0, y: 40 },
      color: '#000',
      backgroundColor: 'rgba(204, 134, 108,0.8)',
      backgroundBorderColor: 'rgba(227, 200, 171,1.0)',
      backgroundBorderRadius: 20,
      backgroundBorderWidth: 4,
      padding: '5px 15px'
    }
  }

  // 图标样式（markerStyles）
  const markerStyles = {
    default: {
      iconUrl: '...',
      iconSize: [25, 41]
    }
  }

  // 文本样式（labelStyles）
  const labelStyles = {
    default: {
      color: '#000',
      offset: { x: 0, y: 30 }
    }
  }

  const options = {
    minZoom: 5,
    maxZoom: 18
  }
</script>

<style scoped>
  #info {
    /* position: relative;
    left: 30px;
    top: 30px; */
    background: #fff;
    width: 350px;
    height: 120px;
    padding: 10px;
    border-radius: 3px;
  }

  p,
  h4 {
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
  }
  h4 {
    margin-top: 30px;
  }
  #add {
    position: relative;
    left: 10px;
    top: 10px;
    z-index: 9999;
  }
  #remove {
    position: relative;
    left: 120px;
    top: 10px;
    z-index: 9999;
  }
</style>
